<template>
  <el-dialog
    center
    v-dialogDrag
    v-if="addDialog"
    title="新增账号"
    v-loading="loading"
    :width="dialogWidth"
    :before-close="close"
    :visible.sync="addDialog"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      v-if="addDialog"
      label-position="right"
      class="mt20 overflow pl15 pr15"
    >
      <el-row type="flex" justify="space-around" class="mb15" v-if="isUpdate">
        <el-col :span="12" class="form-inp">
          <el-form-item
            class="required"
            prop="adminPhone"
            label="管理员手机号："
            :label-width="labelWidth"
          >
            <el-input
              v-model="form.adminPhone"
              autocomplete="off"
              placeholder="请输入管理员手机号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form-inp"></el-col>
      </el-row>
      <el-row type="flex" justify="space-around" class="mb15">
        <el-col :span="12" class="form-inp">
          <el-form-item
            class="required"
            label="名称："
            prop="name"
            :label-width="labelWidth"
          >
            <el-input
              v-model="form.name"
              autocomplete="off"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form-inp">
          <el-form-item label="性质：" prop="type" :label-width="labelWidth">
            <el-select
              placeholder="性质"
              class="small-select"
              v-model="form.type"
            >
              <el-option
                :key="item.number"
                :label="item.name"
                :value="item.number"
                v-for="item in typeList"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" class="mb15">
        <el-col :span="12" class="form-inp">
          <el-form-item label="年代：" prop="year" :label-width="labelWidth">
            <el-date-picker
              type="year"
              value-format="yyyy"
              placeholder="选择年"
              v-model="form.year"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form-inp">
          <el-form-item label="地址：" prop="address" :label-width="labelWidth">
            <AddressCascader @getRegion="handleGetRegion"></AddressCascader>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-around" class="mb15">
        <el-col :span="12" class="form-inp">
          <el-form-item
            label="联系电话："
            prop="phone"
            :label-width="labelWidth"
            class="required"
          >
            <el-input
              type="number"
              autocomplete="off"
              class="block mb10"
              v-model="form.phone"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form-inp">
          <el-form-item
            label="设置账号："
            prop="userName"
            :label-width="labelWidth"
            class="required"
          >
            <el-input
              class="block mb10"
              autocomplete="off"
              v-model="form.userName"
              placeholder="请输入设置账号"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span
      v-if="addDialog"
      slot="footer"
      class="dialog-footer align-center tiling inline-block"
    >
      <el-button @click="close">取 消</el-button>
      <el-button class="theme-btn" @click="handleAddAdmin">提 交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import "@/utils/drag.js";
import { mapGetters } from "vuex";
import { addAdmin } from "@/apis/admin";
import AddressCascader from "@/components/address_cascader";
import { vPhone, vName, vlength } from "@/utils/verification.js";

export default {
  name: "Admin_dialog",
  data() {
    return {
      form: {
        year: "",
        type: "",
        name: "",
        phone: "",
        address: "",
        userName: "",
        adminPhone: ""
      },
      labelWidth: "130px",
      dialogWidth: "820px",
      userDocumentTypeList: [],
      rules: {
        phone: {
          validator: vPhone,
          trigger: "blur"
        },
        adminPhone: {
          validator: vPhone,
          trigger: "blur"
        },
        userName: {
          validator: vlength(1, 20, "请输入设置账号"),
          trigger: "blur"
        },
        address: {
          required: true,
          message: "请输入地址",
          trigger: "blur"
        },
        year: {
          required: true,
          message: "请选择年代",
          trigger: "blur"
        },
        type: {
          required: true,
          message: "请选择性质",
          trigger: "blur"
        },
        name: {
          validator: vName(2, 10, "请输入名称"),
          trigger: "blur"
        }
      }
    };
  },
  watch: {
    addDialog() {
      this.resetForm();
    }
  },
  methods: {
    handleAddAdmin() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const params = {
            phone: this.form.phone,
            address: this.form.address,
            userName: this.form.userName,
            year: this.form.year,
            adminPhone: this.form.adminPhone,
            name: this.form.name,
            type: this.form.type
          };

          this.$store.dispatch("load/setLoading", true);
          // addAdmin(params).then(res => {
          //   if (res && res.code === "200") {
          //     this.$emit("update");
          //     this.$emit("close");
          //     this.$notify({
          //       title: res.msg,
          //       type: "success"
          //     });
          //   }
          // });
          this.$emit("update");
          this.$emit("close");
          this.$notify({
            title: '操作成功！',
            type: "success"
          });
        }
      });
    },
    handleGetRegion(prop) {
      this.form.address = prop;
    },
    close() {
      this.$emit("close");
      this.resetForm();
    },
    resetForm() {
      this.form = {
        year: "",
        type: "",
        name: "",
        phone: "",
        address: "",
        userName: "",
        adminPhone: ""
      };
    }
  },
  props: ["addDialog", "typeList", "isUpdate", "loading"],
  components: {
    AddressCascader
  }
};
</script>

<style scoped></style>
